<template>
  <div class="columnMain">
    <div class="headerBox flex align-center justify-between">
      <div class="left flex align-center">
        <h3 class="flex align-center">
          <img src="/images/titleImg03.png" alt="">
          {{ data.label }}
        </h3>
        <div class="elTabsBox">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.label" :name="`${item.id}`" v-for="(item, index) in data.children"
                         :key="index"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <a href="javascript:;" class="flex align-center">
        更多
        <i class="el-icon-d-arrow-right"></i>
      </a>
    </div>
    <div class="columnBox">
      <div v-if="listData.length > 0">
        <div class="item" v-for="(item,index) in listData" :key="index" @click="toDetailHandler(item)">
          <div class="outside">
            <div class="inner">
              <img :src="item.image ? item.image : defaultImg" alt="">
              <div class="text">
                <h3 class="ellipsis2">{{ item.title }}</h3>
                <div class="flex align-center justify-between">
                  <em>{{ item.author ? item.author : '暂无作者' }}</em>
                  <span>{{ item.publishTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="noDataBox flex align-center justify-center" v-else>
        <el-empty :image-size="100" description="暂无数据"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import {listAllContent} from '@/api/model/column';

export default {
  name: '',
  props: {
    data: {
      type: Object,
      require: true,
      default: {}
    }
  },
  components: {},
  data() {
    return {
      activeName: this.data.children[0].id + '',
      defaultImg: require('@/assets/images/portalWebsite/model01.png'),
      listData: [],
      queryData: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.queryData.columnId = this.data.children[0].id;
    this.getListAllContent();
  },
  methods: {
    handleClick(tab, event) {
      this.queryData.columnId = tab.name;
      this.getListAllContent();
    },
    async getListAllContent() {
      const {code, rows} = await listAllContent(this.queryData);
      if (code === 200) {
        this.listData = [...rows];
      }
    },
    toDetailHandler(item) {
      this.$router.push(`/portalWebsite/contentDetail/${item.id}`);
    }

  },
}
</script>
<style lang="scss" scoped>
.ellipsis2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.columnMain {
  padding: 0 15px;

  .headerBox {
    height: 70px;
    padding: 10px;

    .elTabsBox {
    }

    h3 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
      margin-right: 40px;
      font-weight: bold;
      img{
        width: 30px;
        height: 30px;
        display: block;
        margin-right: 10px;
      }
    }

    a {
      font-size: 14px;
      color: #333;

      i {
        position: relative;
        top: 1px;
      }

      &:hover {
        color: #294098;

        i {
          color: #294098;
        }
      }
    }
  }
}

:deep .el-tabs__header {
  margin-bottom: 0;
}

.columnBox {
  overflow: hidden;

  .item {
    width: 50%;
    cursor: pointer;
    float: left;

    .outside {
      padding: 10px;

      .inner {
        overflow: hidden;
        background: #f1f1f1;
        border-radius: 5px;
        transition: all ease-in 0.25s;

        &:hover {
          transform: translateY(-5px) !important;
          box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.1);
        }

        img {
          width: 150px;
          height: 84px;
          float: left;
        }

        .text {
          width: calc(100% - 150px);
          float: left;
          padding: 11px 15px 0;
          box-sizing: border-box;

          h3 {
            font-size: 14px;
            font-weight: 500;
            margin: 0;
            line-height: 20px;
            text-align: justify;

          }

          > div {
            font-size: 12px;
            color: rgba(153, 153, 153, 1);
            margin-top: 5px;

            em {
              font-style: normal;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-tabs__item {
  &:hover {
    color: #409EFF;
  }

  &.is-active {
    color: #409EFF;
  }
}

::v-deep .el-tabs__active-bar {
  background: #409EFF;
}

.noDataBox {
  height: 400px;
}
</style>
